<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <!--    引入element样式-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios@0.20.0/dist/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <!--    引入element组件库-->
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-header{
            background-color: #99CCFF;
        }
        .header-img{
            width: 50px;
            margin-top: 7px;
            border-radius: 30px;
        }
    </style>
</head>
<body>
<div id="div">
    <el-container>
        <!-- 头部 -->
        <el-header class="el-header">
            <el-container>
                <div>
                    <el-image src="../img/timg.jpg" class="header-img" ></el-image>
                </div>
                <el-menu
                        :default-active="activeIndex2"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#99CCFF"
                        text-color="white"
                        active-text-color="#ffd04b"
                        style="margin-left: auto;">
                    <el-menu-item index="1" v-on:click="GoToMain()">订单信息</el-menu-item>
                    <el-menu-item index="2" v-on:click="GoToMycenter()">个人中心</el-menu-item>
                    <el-menu-item index="3" v-on:click="GoToLogin()">退出</el-menu-item>
                </el-menu>
            </el-container>
        </el-header>
    </el-container>


    <el-container style="height: 580px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1','2']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-menu"></i>个人资料</template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1" v-on:click="find_my_basic()"><i class="el-icon-help"></i>基本信息</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>

<!--        改为注册表-->
        <el-main>
            <b style="color: red;font-size: 20px;">个人中心</b>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>个人名片</span>
                    <el-button v-on:click="handleCreate" style="float: right; padding: 3px 0" type="text">修改用户信息</el-button>
                </div>
                <el-table :data="tableData" v-if="status==0">
                    <div style="color: red;font-size: 20px;">个人信息</div>
                    <el-table-column prop="user_id" label="用户id">
                    </el-table-column>
                    <el-table-column prop="user_nickname" label="用户昵称">
                    </el-table-column>
                    <el-table-column prop="user_phone" label="用户收件号">
                    </el-table-column>

                    <el-table-column prop="user_password" label="用户密码">
                    </el-table-column>
                </el-table>

                <el-button v-on:click="User_Feedback_handleCreat" style="float: right; padding: 3px 0" type="text">用户反馈</el-button>
            </el-card>
            <style>
                .text {
                    font-size: 14px;
                }

                .item {
                    margin-bottom: 18px;
                }

                .clearfix:before,
                .clearfix:after {
                    display: table;
                    content: "";
                }
                .clearfix:after {
                    clear: both
                }

                .box-card {
                    width: 480px;
                }
            </style>

<!--            -------------------------->
<!--用户修改信息-->
            <div class="tab-container">
                <el-dialog :visible.sync="dialogFormVisible">
                    <el-form
                            :model="questionForm"
                            ref="dataForm"
                            label-position="left"
                            label-width="90px"
                            style="width: 400px; margin-left:50px;">
                        <el-form-item label="新昵称" prop="user_nickname">
                            <el-input v-model="questionForm.user_nickname" />
                        </el-form-item>
                        <el-form-item label="新密码" prop="user_password">
                            <el-input v-model="questionForm.user_password" />
                        </el-form-item>
                        </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" round v-on:click="updateUserData()">确定修改</el-button>
                    </div>
                </el-dialog>
            </div>
            <!--用户修改信息-->
            <div class="tab-container">
                <el-dialog :visible.sync="feedbackFormVisible">
                    <el-form
                            :model="feedbackForm"
                            ref="dataForm"
                            label-position="left"
                            label-width="90px"
                            style="width: 400px; margin-left:90px;">
                        <el-form-item label="使用反馈" prop="user_feedback">
                            <el-input v-model="feedbackForm.user_feedback" />
                        </el-form-item>
                        </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="feedbackFormVisible = false">再用用</el-button>
                        <el-button type="primary" round v-on:click="uploadFeedback() ">提交反馈</el-button>
                    </div>
                </el-dialog>
            </div>
        </el-main>

    </el-container>
</div>

</body>
<script>

    function getParams(key) {
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    };
    const URL_IP = "http://localhost:8888"
    const URL_API_HEAD = URL_IP+"/backendapi"
    const URL_USER_API_HEAD = URL_IP+"/userapi"
    new Vue({
        el:"#div",
        data: {
            status:0,
            tableData:[],
            user_id: '',
            user_nickname: '',
            user_type: '',
            user_phone: '',
            user_password: '',
            user_feedback: '',

            input: "",
            questionForm: {
                user_phone: "",
                user_nickname: "",
                user_password: "",
            },
            dialogFormVisible: false,

            input: "",
            feedbackForm: {
                user_feedback: "",
            },
            feedbackFormVisible: false,
        },
            methods:{
            //选择跳转页面用
            find_my_basic(){
                var _this = this
                myphone = getParams("phone");
                console.log(myphone)
                let url = URL_API_HEAD+"/find_userinfo_by_phone"
                console.log(url)
                axios.post(url,{
                    userphone:myphone
                }).then(res=>{
                    console.log(res.data)
                    _this.tableData = res.data
                    _this.user_id = res.data[0].user_id
                    _this.user_nickname = res.data[0].user_nickname
                    _this.user_type = res.data[0].user_type
                    _this.user_phone = res.data[0].user_phone
                    _this.user_password = res.data[0].user_password
                    console.log(_this.tableData)
                    // console.log(_this)
                });
            },
                updateUserData(){

                var _this = this
                console.log("12312312")
                setTimeout(function () {
                    _this.dialogFormVisible = true;
                    _this.user_nickname =  _this.questionForm.user_nickname
                    _this.user_password = _this.questionForm.user_password

                    let url = URL_API_HEAD+"/update_user_by_phone"
                    console.log(url)
                    axios.post(url,{
                        user_id:_this.user_id,
                        user_nickname:_this.user_nickname,
                        user_type:_this.user_type,
                        user_phone:_this.user_phone,
                        user_password:_this.user_password
                    }).then(res=>{
                        console.log(res)
                        _this.dialogFormVisible = false;
                        _this.find_my_basic();
                        // _this.tableData = res.data
                        // console.log(_this.tableData)
                    });
                }, 100);

                },
                //添加增加
                createData(){
                    const params = this.questionForm;
                    // alert(JSON.stringify(params))
                    console.log(params);
                },
            //修改个人信息
                handleCreate() {
                    var _this = this
                    _this.dialogFormVisible = true;
                    this.find_my_basic();
                },
                uploadFeedback(){
                    console.log(this.feedbackForm)

                    // _Id, user_id, feedback_info, feedback_time, is_viewed
                    let url = URL_USER_API_HEAD+"/insert"
                    var _this = this
                    axios.post(url,{
                        user_id:_this.user_id,
                        feedback_info:_this.feedbackForm.user_feedback
                    }).then(res=>{
                        console.log(res)
                        _this.dialogFormVisible = false;
                        _this.find_my_basic();
                        // _this.tableData = res.data
                        // console.log(_this.tableData)
                    });
                },
                    //填写反馈
                User_Feedback_handleCreat(){
                    var _this = this
                    _this.find_my_basic();
                    console.log(this.feedbackForm)
                    this.feedbackFormVisible = true;
                    // setTimeout( function(){
                    //
                    //     _this.feedbackForm.feedbackQuestion =  _this.user_feedback;
                    //     _this.createData();
                    // }, 100 );
                },
                GoToMain(){
                    console.log('test')
                    let url = "/deliver/main.html?phone="+getParams("phone")
                    window.location.href=url
                },
                GoToMycenter(){
                    console.log('test')
                    let url = "/deliver/mycenter.html?phone="+getParams("phone")
                    window.location.href=url
                },
                GoToLogin(){
                    console.log('test')
                    let url = "/deliver/login.html"
                    window.location.href=url
                }


                //修改密码
            // change_password() {
            //     this.$prompt('请输入新密码', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         inputPattern: /(?:\.[\w'·-]+)?/,
            //         inputErrorMessage: '密码不正确'
            //     }).then(({ value }) => {
            //         this.$message({
            //             type: 'success',
            //             message: '你的邮箱是: ' + value
            //         });
            //     }).catch(() => {
            //         this.$message({
            //             type: 'info',
            //             message: '取消输入'
            //         });
            //     });
            // }

        }
    });
</script>
</html>